<template>
  <div id="user">
    <!--搜索-->
    <div class="search-content">
	    <el-input v-model="userName" class="searchItem" placeholder="请输入用户名查询" prefix-icon="el-icon-search" clearable @change="loadData" />
      <el-date-picker
        class="searchItem" 
        v-model="dateTimeRange"
        type="datetimerange"
        range-separator="至"
        clearable
        value-format="yyyy-MM-dd HH-mm-ss"
        @change="loadData"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
     
	    <el-button type="primary" icon="el-icon-search" @click="loadData">查询</el-button>
       <el-button type="primary" icon="el-icon-search" @click="showAdd(true)">添加用户</el-button>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="用户名" prop="userName" align="center"/>
        <el-table-column label="昵称" prop="name" align="center"/>
        <el-table-column label="年龄" prop="age" align="center"/>
        <el-table-column label="性别" prop="sex" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.sex== 1 ?'男':'女'}}</div>
          </template>
        </el-table-column>
      
        <el-table-column label="创建时间" prop="createDate" width="170"  align="center" />
      
      <el-table-column label="操作"  width="500" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="showAdd(false, scope.$index)">修改</el-button>
            <el-button size="mini" type="primary" @click="delUser(scope.$index)">删除</el-button>
            <el-button size="mini" type="primary" @click="showDetail(scope.$index)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 -->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 详细信息 -->
     <el-dialog id="agent-dialog" title="用户详情" :visible.sync="dialogStatus">
      <el-form label-position="right" label-width="140px"  ref="agentRuleForm">
        <el-form-item label="用户名：">
           <el-input v-model="userInfo.userName" disabled></el-input>
        </el-form-item>
        <el-form-item label="昵称：">
           <el-input v-model="userInfo.name" disabled></el-input>
        </el-form-item>
         <el-form-item label="年龄：">
           <el-input v-model="userInfo.age" disabled></el-input>
        </el-form-item>
         <el-form-item label="性别：">
           <el-input :value="userInfo.sex == 1 ?'男':'女'"  disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间：">
           <el-input v-model="userInfo.createDate" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button id="add-btn" type="primary" @click="dialogStatus = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 新增修改 -->
    <el-dialog id="agent-dialog" title="用户详情" :visible.sync="addDialogStatus">
      <el-form label-position="right" label-width="140px"  ref="agentRuleForm">
        <el-form-item label="用户名：">
           <el-input v-model="userInfo.userName" ></el-input>
        </el-form-item>
        <el-form-item label="昵称：">
           <el-input v-model="userInfo.name" ></el-input>
        </el-form-item>
         <el-form-item label="年龄：">
           <el-input v-model="userInfo.age" ></el-input>
        </el-form-item>
        
         <el-form-item label="性别：">
           <el-select v-model="userInfo.sex" clearable placeholder="请选择性别">
            <el-option
              v-for="item in sexList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="创建时间：">
           <el-input v-model="userInfo.createDate" ></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button id="add-btn" type="primary" @click="changeUser()">确 认</el-button>
        <el-button id="add-btn" type="primary" @click="addDialogStatus = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "usersetting",
    data(){
      return{
        // 查询
        userName:"",
        name:"",
        dateTimeRange:[],
        isClearable:true,
        sexList:[
	        {
	        	value: 1,
	        	label:'男'
	        },
	        {
	        	value: 2,
	        	label:'女'
	        }
        ],
        //初始json
        jsonData:[{
          "id": 29,
          "createDate": "2020-02-09 22:04:54",
          "userName": "模拟数据",
          "name": "模拟数据",
          "sex": 1,
          "age": 25
          
      
        }, {
          "id": 30,
          "createDate": "2020-02-09 22:04:54",
          "userName": "模拟数据2",
          "name": "模拟数据2",
          "sex": 2,
          "age": 20
      
      
        }],
        // 列表数据
        tableData:[],
        //分页
        currentPage: 1,
        pageSize:10,
        total: 0,
        dialogStatus: false,
        userInfo: {},
        addDialogStatus: false,
        isAdd: false
      }
    },
    mounted() {
      this.loadData();
    },
    methods:{
    	isNotNull(value){
          return value !== null && value !== undefined && value !== "";
      },
      //查询列表
      loadData(){
        let that=this;
        that.tableData=that.jsonData;
      },
      // 改变每页显示的数量
      handleSizeChange(val) {
        this.pageSize=val;
        this.loadData();
      },
      //改变当前页
      handleCurrentChange(val) {
        this.currentPage=val;
        this.loadData();
      },
      //查看详情
      showDetail(index){
        let that = this;
        that.dialogStatus = true
        that.userInfo = that.jsonData[index];
      },
      //添加修改用户弹框
      showAdd(flag,index){
        let that = this;
        that.addDialogStatus = true
        that.isAdd = flag
        if(that.isAdd){
          
          that.userInfo = {}
        }else{
          that.userInfo = that.jsonData[index]
        }  
      },
      changeUser(){
        let that = this;
        if(that.isAdd){

          that.userInfo.createDate = that.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
          that.addUser()
        }else{
          that.updUser()
        }
        that.addDialogStatus = false;
      },
      addUser(){
        let that = this;
        that.jsonData.push(that.userInfo)
        that.loadData();
      },
      updUser(){
        let that = this;
        for(let i = 0; i < that.jsonData.length; i ++){
          if(that.jsonData[i].id == that.userInfo.id){
            that.jsonData[i] = that.userInfo
          }
        }
        that.loadData();
      },
      //删除用户
      delUser(index){
        let that = this;
        this.$confirm('确认要删除吗?', '提示', {})
        .then(() => {
          that.jsonData.splice(index, 1);
          that.loadData();
        })
        .catch(() => { });
      },
      //格式日期
      formatDate(date, format){
        var o = {
          "M+" : date.getMonth()+1, //month
          "d+" : date.getDate(),    //day
          "h+" : date.getHours(),   //hour
          "m+" : date.getMinutes(), //minute
          "s+" : date.getSeconds(), //second
          "q+" : Math.floor((date.getMonth()+3)/3),  //quarter
          "S" : date.getMilliseconds() //millisecond
          }
          if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
          (date.getFullYear()+"").substr(4 - RegExp.$1.length));
          for(var k in o)if(new RegExp("("+ k +")").test(format))
          format = format.replace(RegExp.$1,
          RegExp.$1.length==1 ? o[k] :
          ("00"+ o[k]).substr((""+ o[k]).length));
          return format;
      }
    }
  }
</script>

<style scoped>
.searchItem{
  width:300px; 
  margin-right: 20px;
}
</style>
